<script setup lang="ts">
import { ref, onUnmounted, reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();
const isOptPopVisible = ref(false);
</script>
<template>
    <div
        :class="isOptPopVisible ? 'as-opt-cur' : 'as-opt'"
        @pointerdown.stop="isOptPopVisible = !isOptPopVisible"
    >
        ☰
    </div>
    <div v-if="isOptPopVisible" class="as-opt-main">内容区域</div>
</template>

<style scoped lang="scss">
.as-opt,
.as-opt-cur {
    user-select: none;
    cursor: pointer;
    height: 100%;
    width: auto;
    line-height: 60px;
    border-right: 1px solid var(--cm4);
    font-size: 22px;
    padding: 0 20px;
    &:hover {
        background-color: var(--cm4);
    }
}
.as-opt-cur {
    background-color: var(--cm4);
}
.as-opt-main {
    position: absolute;
    top: 60px;
    left: 0;
    width: 200px;
    height: calc(100% - 160px);
    background-color: var(--ch4);
}
</style>
